<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>

<div id="app">
	<h1 v-show="ok">v-show</h1>
	<hr>
	<h1 v-if="ok">{{ msg }}</h1>
	<button @click="ok = !ok">toggle h1</button>
	<hr>
	<!-- 
	v-if   vs     v-show 
	
	v-show 切换元素的 CSS property display
	不支持 <template> 元素，也不支持 v-else
	如果需要非常频繁地切换，则使用 v-show 较好
	
	v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
	<div v-if="awesome">
		<h1>Vue is awesome!</h1>
		<p>Vue is awesome!Vue is awesome!</p>
		<p>Vue is awesome!Vue is awesome!</p>
		<p>Vue is awesome!Vue is awesome!</p>
	</div>
	<div v-else>
		<h1>Oh no 😢</h1>
		<p>Oh no 😢</p>
	</div> -->
	<template v-if="awesome">
		<h1>Vue is awesome!</h1>
		<p>Vue is awesome!Vue is awesome!</p>
		<p>Vue is awesome!Vue is awesome!</p>
		<p>Vue is awesome!Vue is awesome!</p>
	</template>
	<template v-else>
		<h1>Oh no 😢</h1>
		<p>Oh no 😢</p>
	</template>
	<hr>
	<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
	
	<button @click="awesome = !awesome">Toggle H1</button>
	<button @click="type = 'D'">Toggle Type</button>
	<hr>
	<!-- <template v-if="loginType === 'username'">
	  <label>Username</label>
	  <input key="1" placeholder="Enter your username">
	</template>
	<template v-else>
	  <label>Email</label>
	  <input key="2" placeholder="Enter your email address">
	</template> -->
	<div v-show="loginType === 'username'">
	  <label>Username</label>
	  <input placeholder="Enter your username">
	</div>
	<div v-show="loginType !== 'username'">
	  <label>Email</label>
	  <input key="2" placeholder="Enter your email address">
	</div>
	<br>
	<button @click="toggleLoginType">toggleLoginType</button>
</div>

<script src="./vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
